<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浅拷贝</title>
</head>

<body>
    <h1>浅拷贝拷贝基本数据类型时，是直接赋值，而拷贝引用数据类型时赋值地址值</h1>
    <hr>
    <h1>浅拷贝拷贝基本数据类型时，是直接赋值，而拷贝引用数据类型时赋值地址值</h1>
    <hr>
    <script>
        const student = {
            name: '张三',
            age: 18
        }

        // 直接复制的拷贝，赋值的是地址值，一改全改
        // const stu = student
        // stu.age = 20
        // console.log(stu); // {name: '张三', age: 20}
        // console.log(student); // {name: '张三', age: 20}

        // 浅拷贝是复制值，不是赋值地址
        // const stu = { ...student } // 通过扩展运算符实现浅拷贝
        // stu.age = 20
        // console.log(stu); // {name: '张三', age: 20}
        // console.log(student); // {name: '张三', age: 18}

        // 通过assign实现浅拷贝
        const stu = {}
        Object.assign(stu, student)
        stu.age = 20
        console.log(stu); // {name: '张三', age: 20}
        console.log(student); // {name: '张三', age: 18}

        const person = {
            name: '李四',
            age: 18,
            family: {
                dad: '老四',
                mom: '翠花'
            }
        }

        const per = {}
        Object.assign(per, person)
        per.family.dad = '老登'
        console.log(per); // {name: '李四', age: 18, family: {dad: '老登', mom: '翠花'}}
        console.log(person); // {name: '李四', age: 18, family: {dad: '老登', mom: '翠花'}}
    </script> 
</body>

</html>